<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./layout/mainTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns="http://www.w3.org/1999/xhtml">
    <ui:define name="top">
        <h:outputLabel value="Producto" class="tituloPrincipal"/>
    </ui:define>

    <ui:define name="left">
    </ui:define>
    <ui:define name="content">
        <h:form id="contenido">



            <p:panel header="Producto">
                <p:panelGrid columns="2">
                    <h:outputLabel value="Nombre"/>
                    <p:inputText id="txtnombreprod" value="#{productoAction.producto.nombreProducto}"/>

                    <h:outputLabel value="Descripcion"/>
                    <p:inputText id="txtdescripcionprod" value="#{productoAction.producto.descripcion}"/>          

                    <h:outputLabel value="Categoria"/>
                    <p:selectOneMenu id="menucategorias" value="#{productoAction.categoriaSel}" panelStyle="width:150px"  converter="categoriaConverter"
                                     var="c" style="width:160px"  filter="true" filterMatchMode="startsWith">  
                        <f:selectItem itemLabel="Seleccionar" itemValue="" />  
                        <f:selectItems value="#{productoAction.categorias}" var="categoriaConverter" itemLabel="#{categoriaConverter.nombre}" itemValue="#{categoriaConverter}"/>

                        <p:column>  
                            #{c.nombre}
                        </p:column>  
                    </p:selectOneMenu>  

                    <h:outputLabel value="Cantidad" rendered="#{!productoAction.modoModificar}"/>
                    <p:spinner id="txtcantidad" value="#{productoAction.cantidad}" min="0" rendered="#{!productoAction.modoModificar}"/>

                    <h:outputLabel value="Precio" rendered="#{!productoAction.modoModificar}"/>
                    <p:inputText id="txtprecio" value="#{productoAction.precio}" rendered="#{!productoAction.modoModificar}"/>

                    <h:panelGroup/>
                    <p:panelGrid columns="2">
                        <p:commandButton id="guardarbtn" value="Guardar" action="#{productoAction.guardar()}" ajax="false"/>
                        <p:commandButton id="cancelarbtn" value="Cancelar" action="#{productoAction.cancel()}" ajax="false"/>
                    </p:panelGrid>
                    <h:panelGroup/>
                    <p:messages id="messagesgproducto" showDetail="true" autoUpdate="true" closable="true" > 
                        <p:effect type="fade" event="load" delay="3000" />
                    </p:messages>


                </p:panelGrid>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>